<template>
  <div class="example4">
    <code-container
      :code="thisCode"
      v-on:close="isShowCode = false"
      v-if="isShowCode"
    ></code-container>
    <data-v-panel>
      <template slot="title">
        普通百分比
        <a href="javascript:;" class="look-code" @click="lookCode('percentage')"
          >代码</a
        >
      </template>
      <template slot="body">
        <data-v-percentage :value="p" name="下载率" type="1"></data-v-percentage>
        <data-v-percentage :value="p" name="下载率" type="2"></data-v-percentage>
        <data-v-percentage :value="p" name="下载率" type="3"></data-v-percentage>
        <data-v-percentage :value="p" name="下载率" type="4"></data-v-percentage>
        <data-v-percentage :value="p" name="下载率" type="5"></data-v-percentage>
      </template>
    </data-v-panel>
     <data-v-panel>
      <template slot="title">
        带数量的百分比
        <a href="javascript:;" class="look-code" @click="lookCode('percentnum')"
          >代码</a
        >
      </template>
      <template slot="body">
          <data-v-percentnum :value="p" number="1056325" type="1"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="2"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="3"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="4"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="5"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="6"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="7"></data-v-percentnum>
          <data-v-percentnum :value="0.5" number="1056325" type="8"></data-v-percentnum>
          <data-v-percentnum :value="p" number="1056325" type="9"></data-v-percentnum>
      </template>
    </data-v-panel>
    <go-home></go-home>    
  </div>
</template>

<script>
import CodeContainer from "./code-container.vue";
export default {
  name: "example4",
  components: {
    CodeContainer
  },
  data() {
    return {
      thisCode: "",
      isShowCode: false,
      p: 0.0001,
      timerId: null
    };
  },
  created() {
    this.timerId = setInterval(() => {
      this.p += 0.01;
      if (this.p > 1) {
        this.p = 0.0001;
      }
    }, 200);
  },
  beforeDestroy() {
    clearInterval(this.timerId);
  },
  methods: {
    lookCode(name) {
      let filePath = `./docs/${name}.md`;
      // eslint-disable-next-line no-undef
      let loading = ui.loading(2, "加载中...");
      // eslint-disable-next-line no-undef
      get(filePath).then(res => {
        loading.hide();
        this.thisCode = res;
        this.isShowCode = true;
      });
    }
  }
};
</script>

<style lang="less">
.example4 {
  min-height: 100vh;
  padding: 10px;
  background: #000 url(./example1-img/gridBg.png);
  color: #fff;
  .grid-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
}
</style>
